<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="100px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="指令类型：">
              <dg-select clearable v-model="condition.zllx.value" :data="constant.BM_ZLLX"> </dg-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="最晚反馈时间：" label-width="110px">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                popper-class="table-date-timerange"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="指令状态：">
              <dg-select clearable v-model="condition.zlzt.value" :data="constant.BM_QSFKZT"> </dg-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="关键词：">
              <el-input clearable v-model="condition.query_keys.value" />
            </el-form-item>
          </div>
          <div></div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()">查询</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <el-tabs v-model="activeTab" @tab-click="onTabChange">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${tab.label}(${tab.num})`" :name="tab.name" />
      </el-tabs>
      <dg-table class="table" ref="table" url="/v1/zl/searchJs" :condition="condition">
        <dg-table-column label="序号" type="index" width="70" fixed="left" />
        <dg-table-column label="发布时间">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.fbsj }}</span>
          </template>
        </dg-table-column>

        <dg-table-column label="指令类型">
          <template slot-scope="{ row }">
            <span v-translate="{ code: BM_ZLLX, value: row.zlxx.zllx }"></span>
          </template>
        </dg-table-column>

        <dg-table-column label="关联信息" prop="glxx" />
        <dg-table-column label="最晚反馈时限">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.zwfksj }}</span>
          </template>
        </dg-table-column>
        <dg-table-column label="指令状态">
          <template slot-scope="{ row }">
            <span v-translate="{ code: BM_QSFKZT, value: row.qszt }"></span>
          </template>
        </dg-table-column>

        <dg-table-column label="下发单位">
          <template slot-scope="{ row }">
            <span v-translate="{ code: BM_DEPT, value: row.zlxx.fbdwdm }"></span>
          </template>
        </dg-table-column>

        <dg-table-column label="下发人">
          <template slot-scope="{ row }">
            <span>{{ row.zlxx.fbrxm }}</span>
          </template>
        </dg-table-column>
        <dg-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button v-permission="['QSFK_QS']" type="text" @click="onSign(row)" :disabled="row.qszt === '1'">签收</el-button>
            <el-button v-permission="['QSFK_ZL']" type="text">反馈</el-button>
            <el-button
              type="text"
              @click="() => $router.push({ name: 'ImpSignFeedbackDetail', params: { id: row.id } })"
            >
              详情
            </el-button>
          </template>
        </dg-table-column>
      </dg-table>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { onSignIn } from '@/api/common';
import { deepClone } from '@/utils/common';
import { BM_ZLLX, BM_DEPT } from '@/common/codeDic';
export default {
  name: 'SignFeedbackList',
  data() {
    return {
      time: '',
      activeTab: '',
      BM_ZLLX,
      BM_DEPT,
      cloneCondition: [],
      tabs: [
        { label: '待办事项', name: 'DBSL', num: '10' },
        { label: '其他领导关注', name: 'GZSL', num: '10' },
        { label: '全部', name: 'QBSL', num: '20' }
      ],
      condition: {
        query_qx: {
          value: 'MY',
          op: '='
        },
        zlly: {
          value: '1',
          op: '='
        },
        zllx: {
          value: '',
          op: '='
        },
        zlzt: {
          value: '',
          op: '='
        },
        query_keys: {
          value: '',
          op: 'like'
        },
        query_lblx: {
          value: 'DBSL',
          op: '='
        }
      }
    };
  },
  computed: {
    ...mapState(['constant'])
  },
  mounted() {
    this.$store.dispatch('getConstant', ['BM_ZLLX', 'BM_QSFKZT']);
    this.cloneCondition = deepClone(this.condition);
    // 权限不同初始值不同
    this.activeTab = 'DBSL';
  },
  watch: {
    time(val) {
      this.condition.zwfksj.value = val ? `${val[0]},${val[1]}` : '';
    }
  },
  methods: {
    /**
     * 签收
     */
    onSign(row) {
      this.$confirm('确认签收?').then(() => {
        const loadingInstance = this.$loading({
          lock: true,
          text: '签收中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        onSignIn(row.id)
          .then(() => {
            this.$refs.table.searchForm();
            this.$message.success('签收成功');
            loadingInstance.close();
          })
          .catch(() => {
            this.$message.warning('签收失败');
            loadingInstance.close();
          });
      });
    },
    onTabChange(tab) {
      this.condition.query_lblx.value = this.tabs[parseInt(tab.index)].name;
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.condition = { ...deepClone(this.cloneCondition), query_lblx: this.condition.query_lblx };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  /deep/.el-tabs__nav {
    margin-left: 20px;
  }
  .table {
    padding: 0 20px 0;
  }
}
</style>
